<template>
  <div id="success_case">
    <section class="case-banner">
      <div class="case-rotate">
        <img src="../../assets/success_svg.png" alt />
      </div>
      <div class="banner-title">
        <h5>成功案例</h5>
        <p>Successful cases</p>
      </div>
    </section>
    <div class="nav-item">
        <ul class="tablist container">
            <li v-for="(item, index) in tabList" :key="index" @click="$router.replace(`/success_case/${item.id}`)" :class="{active: routerId == item.id}">{{item.name}}</li>
        </ul>
    </div>
    <div class="company">
        <div class="dir" v-if="companyInfo[routerId - 1] && companyInfo[routerId - 1].details">
            <div class="container">
                <h5>公司介绍</h5>
                <p>{{companyInfo[routerId - 1].details}}</p>
            </div>
        </div>
        <div class="demo_look" v-if="companyInfo[routerId - 1] && companyInfo[routerId - 1].demoImg">
            <h5>产品展示</h5>
            <p>
                <img :src="companyInfo[routerId - 1].demoImg" alt="">
            </p>
        </div>
        <div class="earnings" v-if="companyInfo[routerId - 1] && companyInfo[routerId - 1].earnings">
            <div class="container">
                <h5>带来的收益</h5>
                <p>{{companyInfo[routerId - 1].earnings}}</p>
            </div>
        </div>
        <div class="evaluate" v-if="companyInfo[routerId - 1] && companyInfo[routerId - 1].evaluate">
            <div class="container">
                <h5>客户评价</h5>
                <p>{{companyInfo[routerId - 1].evaluate}}</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cases",
  data() {
    return {
        routerId:null,
        tabList:[
            {name:'快捷钱包', id:1},
            {name:'牛掰钱包', id:2},
            {name:'联邦交易所', id:3},
            {name:'潘多拉', id:4},
        ],
        companyInfo:[
            {
                details:`我们认为国家与国家之间支付的货币不应该由某一个国家发，而应该由区块链技术发行，由世界人民自己掌握。最终被国际认可，形成一种国家之间可以自由使用、秒级到账、不可增发的优势货币。其目标是通过区块链与分布式账本技术，构建一个全球范围内的货币自由流通体系。这个体系可以让每个用户自由的进行国际间金融交易。原子链采用五层架构：数据层、网络层、共识层、合约层、应用层。数据层使用分布式账本技术，实现货币的发行、支付、交换等操作；网络层采用P2P网络协议实现的对等网络。`,
                demoImg:require('~/assets/kjdemo_wallet.png'),
                earnings:`改进黄金和数字货币的缺点。黄金和比特币极具价值，所以我们的ATOS也会极具价值。增值很简单，你只要解决现在黄金，比特币还有其他加密货币的部分缺点，一个个问题去踏实解决，比他们好用，慢慢就会有人认可，那么我们的价值就会成千上万倍。`,
                evaluate:`通过去中心化的自治形式，建造一个多元化的金融流通网络，提升货币的流动性、安全性、广泛性。该公司对区块链技术有丰富的实战经验，不止于产品上线，上线后还进行了维护，合作非常愉快。`
            },
            {
                details:`牛掰钱包，成立于2017年11月15日，注册资本1000万人民币元。公司以规范、专业、创新、共赢的经营理念，高效贴心的服务，团结协作、敬业负责、服务奉献、求实进取的企业精神，始终贯彻以追求合作伙伴最大利益为目标，竭诚为合作伙伴提供最大程度的保障。`,
                demoImg:require('~/assets/nb_wallet.png'),
                earnings:null,
                evaluate:'通过去中心化的自治形式，建造一个多元化的金融流通网络，提升货币的流动性、安全性、广泛性。该公司对区块链技术有丰富的实战经验，不止于产品上线，上线后还进行了维护，合作非常愉快。'
            },
            {
                details:null,
                demoImg:require('~/assets/lb.png'),
                earnings:null,
                evaluate:null
            },
            {
                details:null,
                demoImg:require('~/assets/pdl.png'),
                earnings:null,
                evaluate:null
            }
        ]
    };
  },
  mounted () {
      this.routerId = this.$route.params.id;
  }
};
</script>
<style lang="stylus" scoped>
@import '../../static/styl/mixin.styl'
#success_case
  .case-banner
    width 100%
    height 697px
    overflow hidden
    background linear-gradient(180deg, rgba(0, 0, 3, 1), rgba(5, 18, 144, 1))
    position relative
    .case-rotate
        width 967px
        height 704px
        padding 42px 0 0
        margin 0 auto
      .banner-title
        positCenter(50%, auto, auto, 50%, -50%, -50%)
        color #fff
        margin 0 auto
        text-align center
        h5
          font-size 52px
        p
          font-size 30px
          margin-top 27px
 .nav-item
    width 100%
    height 80px
    background-color #021C4E
    .tablist
        display flex
        justify-content space-around
        text-align center
        li
            width 298px
            line-height 80px
            color #fff
  .company
    .dir,
    .evaluate
    .earnings
        text-align center
        padding 94px 0 63px
        box-sizing border-box
        height 445px
        bgImg('../../assets/company_bg.png', cover)
        h5
            font-size 42px
            padding 8px
            display inline
            margin 0 auto
            border-bottom 1px solid #A0A0A0
        p
            margin-top 54px
            font-size 14px
            text-align left
            line-height 30px
    .demo_look
        padding-top 90px
        padding-bottom 90px
        background #fff
        h5
            font-size 42px
            padding 8px
            width 171px
            margin 0 auto
            border-bottom 1px solid #A0A0A0
        p
            margin-top 108px
    .earnings
        height 332px
        bgImg('../../assets/earnings_bg.png', cover)
    .evaluate
        background none
        background-color #fff
        p
            width 1164px
.active
    background:rgba(0,160,233,.1);
</style>